<template>
  <div class="contain">
    <div class="top">
        <div class="top2">
          <!-- 头部时间选择，必须为周四且为一周 -->
          <div style="margin-top:2px"><span>时间：</span></div>
          <div class="Time">
            <el-date-picker
              v-model="value1"
              :picker-options="optionsDisable"
              size="mini"
              type="daterange"
              @change="handData"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
    </div>
    <!-- 菜单栏选择器 -->
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <keep-alive>
            <tab-pane v-if="activeName==item.key" :display="elelack" :dataItems="dataItems" :type="item.key"/>
          </keep-alive>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from '@/components/admin/LineAdopt/TabPane.vue';

export default {
    components: {
            TabPane
        },
    data() {
        return {
            value1:'',
            elelack: false,
            activeName: 'AdoptTable',
            tabMapOptions:[
                { label: "安排表",key:'AdoptTable'},
                { label: "暂无",key:'NoData1'},
                { label: "暂无",key:'NoData2'},
                { label: "暂无",key:'NoData3'}
            ],
            dataItems:{
              timeRange:'',
              maxDate:new Date(),
              minDate:new Date()
            },
            maxDate:new Date(),
            minDate:new Date()
        }
    },
    watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
      }
    },
    created() {
    // 初始默认块
        const tab = this.$route.query.tab
        if (tab) {
        this.activeName = tab
        }
    },
    methods: {
        // 对选取时间进行判断是否符合条件
        handData(time) {
        if(time[0].getDay() == 4 && (time[1].getTime()-time[0].getTime() == 6*86400000)){
          this.elelack = true
          this.maxDate = time[1]
          this.minDate = time[0]
          this.dataItems.maxDate = time[1]
          this.dataItems.minDate = time[0]
          this.elelack = true
          // 计算时间范围传递给下一个组件
          let time1 = this.minDate.getFullYear()+"."+this.minDate.getMonth()+"."+this.minDate.getDate();
          let maxDate = new Date(this.minDate.getTime()+86400000*6);
          let time2 = maxDate.getFullYear()+"."+maxDate.getMonth()+"."+maxDate.getDate()
          this.dataItems.timeRange = time1+"-"+time2
        }else{
          this.$message.error('请选择周四并且周期为一周');
          this.elelack = false
        }
        console.log(this.elelack)
      },
    },
}
</script>

<style scoped>
.contain{
    padding: 20px;
}
.top{
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEEF5;
    font-weight: 10px;
}
.top2{
  margin-top: 10px;
  display: flex;
}
</style>